<template>
  <div id="app">
    <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal">
      <el-menu-item index="/config">{{$t('navbar.config')}}</el-menu-item>
      <el-menu-item index="/ip-pool">{{$t('navbar.ip')}}</el-menu-item>
    </el-menu>
    <router-view class="container"/>
  </div>
</template>

<script>
let defHash = location.hash.replace('#','')
export default {
  name: 'App',
  data(){
    return{
      activeIndex:defHash || '/config'
    }
  },
  watch:{
    $route(to,form){
      this.activeIndex = to.path
    }
  },
  methods:{
    hanlderSwitchLang(lang){
      this.$i18n.locale = lang
      localStorage.setItem('lang', lang);
    },
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*{
  padding: 0;
  margin: 0;
  list-style: none;
}
.container{
  padding: 15px;
  box-sizing: border-box;
}
.my-select{
  width: 100%;
}
</style>
